<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid" style="margin-top: 60px">
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <h2 class="text-center">手机验证码登录界面</h2>
            <hr>
            <div class="form-group">
                <label for="id_telephone">手机号:</label>
                <input type="text" name="telephone" id="id_telephone" class="form-control">
            </div>
            <div class="form-group">
                <label for="id_code">验证码:</label>
                <input type="text" name="code" id="id_code" class="form-control">
                <br>
                <input type="button" class="btn pull-right" value="发送验证码" id="send_code" onclick="send(),settime(this)">
            </div>
            <br>
            <br>
            <input type="button" value="登录" class="btn btn-success" id="id_commit">
            <span style="color: red" id="error"></span>
            <hr>
            <a href="/user/register/" class="pull-right">注册>></a>
            <br>
            <hr>
            <a href="/user/login/" class="pull-right">账号密码登录>></a>

        </div>
    </div>
</div>


<script>
      function send(){
            $.ajax({
                url:"/user/send_smscode/",
                type:"GET",
                data:{"telephone": $("#id_telephone").val()},
                success:function(msg){

                }
            });
        }
        var countdown=60;
        function settime(val) {
            if (countdown == 0) {
                val.removeAttribute("disabled");
                val.value="发送验证码";
                countdown = 60;
                return;
            } else {
                val.setAttribute("disabled", true);
                val.value="重新发送(" + countdown + ")";
                countdown--;
            }
            setTimeout(function() {
                settime(val) },1000)}

      //登录提交请求
      $('#id_commit').click(function (){
          $.ajax({
              url: '',
              type: 'post',
              data: {
                  'telephone': $('#id_telephone').val(),
                  'code': $('#id_code').val(),
                  'csrfmiddlewaretoken': '{{ csrf_token }}',
              },

              success: function (args){
                  if(args.code === 1000){
                      window.location.href = args.url
                  }else {
                      $('#error').text(args.msg)
                  }
              }
          })
      })
</script>
</body>
</html>